<template>
  <div class="wrap"
       id="reset">
    <!-- 导航栏 -->
    <van-nav-bar title="访客通行"
                 left-text=""
                 right-text="访客记录"
                 left-arrow
                 @click-left="onClickLeft"
                 @click-right="onClickRight"
                 custom-class="icon" />
    <!-- 访客姓名 -->
    <van-field v-model="text"
               label="访客姓名"
               clearable
               :required="true"
               style="
              color:red" />
    <!-- 手机 -->
    <van-field v-model="tel"
               type="tel"
               label="手机号"
               clearable
               :required="true" />
    <!-- 性别 -->
    <van-cell :required="true">
      <span>性别：</span>
      <van-radio-group v-model="radio"
                       direction="horizontal">
        <van-radio name="1"
                   checked-color="#FFB6C1"
                   icon-size="15px"
                   checked>女</van-radio>
        <van-radio name="2"
                   checked-color="#FFB6C1"
                   icon-size="15px">男</van-radio>
      </van-radio-group>
    </van-cell>
    <!-- 地址 -->
    <!-- :required="true"  -->
    <!-- is-link -->
    <van-cell v-model="visitPlace"
              is-link
              :required="true"
              @click="showPopup1" />
    <van-popup v-model="show1"
               @close="onClose">
      <van-picker show-toolbar
                  title="到访地址"
                  :columns="columns"
                  @cancel="onCancel"
                  @confirm="onConfirm" />
    </van-popup>
    <!-- 来访事由 -->
    <VisitorReason v-on:setReason="setReason" />
    <!-- 来访时间 -->
    <van-cell :title="visitTime"
              is-link
              @click="showPopup"
              :required="true" />
    <van-popup v-model="show"
               @close="onClose">
      <van-datetime-picker v-model="currentDate"
                           type="datetime"
                           :min-date="minDate"
                           :max-date="maxDate"
                           @confirm="confirmDate"
                           @cancel="cancel" />
    </van-popup>
    <!-- 来访备注 -->
    <van-field v-model="remark"
               label="备注"
               clearable />
    <!-- 通行证模块 -->
    <div>
      <button class="createPermit"
              @click="showPopup2">生成通行证
      </button>
    </div>
    <van-popup v-model="show2"
               @close="onClose">
      <div v-if="messageRequire">
        <span>通行证：当天有效</span><br />
        <img :src="require('@/assets/images/PropertyPageImages/QRCode.png')"
             class="qrCode">
      </div>
      <div v-else
           style="height:100px;text-align:center;">
        <p style="line-height:100px;">缺少必要信息！</p>
      </div>
    </van-popup>
    <span class="tip">通行证只在到访当天单次有效，逾期或超次需重新生成</span>
  </div>
</template>
<script>
import VisitorReason from '@/components/Property/VisitorReason'
import { msToDate } from '@/IconFont/getTime.js'
export default {
  name: 'Visitors',
  data () {
    return {
      show: false,
      show1: false,
      show2: false,
      radio: '1',
      text: '',
      tel: '',
      reason: '',
      remark: '',
      minDate: new Date(),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2010, 1, 1), // 这里的时间用于判断用户有没有选择
      visitTime: '来访时间',
      visitPlace: '到访地址',
      messageRequire: false, // 用户有没有完整填表的状态码
      columns: [
        // 第一列
        {
          values: [
            'A', 'B', 'C', 'D', 'E'
          ],
          defaultIndex: 2
        },
        // 第二列
        {
          values: ['101', '202', '303', '505', '606'],
          defaultIndex: 1
        }
      ]
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push('Property')
    },
    onClickRight () {
      this.$router.push('/VisitorRecord')
    },
    showPopup () {
      this.show = true
    },
    showPopup1 () {
      this.show1 = true
    },
    showPopup2 () {
      // 判断姓名，手机，性别，地址，来访缘由，来访时间是否都有填写
      if (this.text !== '' && this.tel !== '' && this.visitPlace !== '到访地址' && this.visitTime !== '来访时间') {
        this.messageRequire = true
      } else {
        this.messageRequire = false
      }
      // 写入vuex‘s store
      if (this.messageRequire === true) {
        var gender
        var vPlace = this.visitPlace.substring(5)
        var vTime = this.visitTime.substring(5)
        if (this.radio === '1') {
          gender = '女'
        } else {
          gender = '男'
        }
        var obj = {
          name: this.text,
          gender: gender,
          telephone: this.tel,
          visitPlace: vPlace,
          reason: this.reason,
          visitTime: vTime,
          notice: this.remark
        }
        this.$store.dispatch('_addVisitor', obj)
      }
      // 显示通行二维码
      this.show2 = true
    },
    setReason (val) {
      this.reason = val
    },
    onClose () {
      this.show = false
    },
    // 时间
    confirmDate (val) {
      this.show = false
      var result = msToDate(val)
      this.visitTime = `来访时间:${result[1]}`
    },
    cancel () {
      this.show = false
    },
    // 地址
    onCancel () {
      this.show1 = false
    },
    onConfirm (value, index) {
      this.show1 = false
      this.visitPlace = `到访地址:${value[0]}栋${value[1]}`
    }
  },
  components: {
    VisitorReason
  }
}
</script>
<style scoped>
.el-radio__input.is-checked + .el-radio__label {
  color: #ffb6c1 !important;
}
/* 选中后小圆点的颜色 */
.el-radio__input.is-checked .el-radio__inner {
  background: #ffb6c1 !important;
  border-color: #ffb6c1 !important;
}
.wrap {
  text-align: center;
}
.van-popup.van-popup--center {
  width: 70%;
  height: auto;
}
.createPermit {
  color: #fff;
  border: none;
  width: 90%;
  margin-top: 4%;
  padding-bottom: 2%;
  padding-top: 2%;
  background-color: rgb(114, 202, 205);
}
.van-cell__title {
  text-align: left;
}
.qrCode {
  width: 80%;
  height: auto;
}
.tip {
  text-align: center;
  width: 90%;
  font-size: 13px;
  color: #778899;
}

.van-nav-bar {
  background-color: rgb(114, 202, 205);
}
::v-deep .van-nav-bar .van-icon,
::v-deep .van-nav-bar__text,
::v-deep .van-nav-bar .van-ellipsis {
  color: #fff;
}
.van-cell {
  color: #323233 !important;
}
::v-deep .van-field__label {
  color: #323233 !important;
}
::v-deep .van-cell__title {
  color: #323233 !important;
}
</style>
